<template>
	<view class="details">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<headBarWX title="个人资料" :show='true'></headBarWX>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<headBarAPP title='个人资料'></headBarAPP>
		<!-- #endif -->

		<view class="container">
			<view class="item avatar">
				<view class="text">头像</view>
				<view class="iconfont right-arrow">&#xe683;</view>
				<view class="image">
					<image :src="userInfo.avatar_cloudPath" mode="aspectFill"></image>
				</view>
			</view>
			<view class="item name" @tap="To_changName()">
				<view class="text">昵称</view>
				<view class="iconfont right-arrow">&#xe683;</view>
				<view class="text-name">{{userInfo.name}}</view>
			</view>
			<view class="item account">
				<view class="text">账户</view>
				<view class="iconfont right-arrow">&#xe683;</view>
				<view class="text-account">{{userInfo.account}}</view>
			</view>
			<view class="item sex" @tap="To_changeSex()">
				<view class="text">性别</view>
				<view class="iconfont right-arrow">&#xe683;</view>
				<view class="text-sex">{{userInfo.sex}}</view>
			</view>
			<view class="item phoneNumber" @tap="To_changNumber()">
				<view class="text">手机号</view>
				<view class="iconfont right-arrow">&#xe683;</view>
				<view class="text-phoneNumber">{{formatPhoneNumber(userInfo.phoneNumber)}}</view>
			</view>
			<view class="item avatar">
				<view class="text">地区</view>
				<view class="iconfont right-arrow">&#xe683;</view>
			</view>
			<view class="item avatar">
				<view class="text">签名</view>
				<view class="iconfont right-arrow">&#xe683;</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		onShow() {
			const app = getApp();
			this.userInfo = app.userInfo;
			console.log(this.userInfo);
		},
		methods: {
			/** 格式化手机号
			 * 
			 */
			formatPhoneNumber(phoneNumber) {
				phoneNumber = String(phoneNumber);
				if (phoneNumber.length < 7) {
					return phoneNumber;
				}
				const prefix = phoneNumber.slice(0, 3);
				const suffix = phoneNumber.slice(-2);
				const masked = '*'.repeat(phoneNumber.length - 5);
				return `${prefix}${masked}${suffix}`;
			},

			/** 前往修改昵称页面
			 * 
			 */
			To_changName() {
				uni.navigateTo({
					url: '/pages/personalPage/details/changName/changName',
				})
			},

			/** 前往修改性别页面
			 * 
			 */
			To_changeSex() {
				uni.navigateTo({
					url: "/pages/personalPage/details/changSex/changSex"
				});
			},

			/** 前往修改手机号页面
			 * 
			 */
			To_changNumber() {
				uni.navigateTo({
					url: "/pages/personalPage/details/changNumber/changNumber"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-bottom: 3rpx solid rgba(0, 0, 0, 0.05);
		height: 120rpx;
		position: relative;

		.text {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: $font-size-l-s;
			opacity: 0.7;
		}

		.right-arrow {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: $icon-size-s-m;
			opacity: 0.8;
		}
	}

	.avatar {
		.image {
			position: absolute;
			right: 100rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, 0.1);
			box-shadow: 0 0 5rpx 5rpx rgba(0, 0, 0, 0.05);

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.phoneNumber>.text-phoneNumber,
	.account>.text-account,
	.sex>.text-sex,
	.name>.text-name {
		position: absolute;
		right: 100rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: $font-size-m-l;
		opacity: 0.8;
	}
</style>